<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="__PUBLIC__/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/icon.css">
    <script type="text/javascript" src="__PUBLIC__/js/add-tab.js"></script>

    <style type="text/css">
        .rolePanel {
            float:left;
            width:300px;
            height:auto;
            margin:10px 0 0 100px;
        }

        .perPanel {
            float:left;
            width:400px;
            height:auto; 
            margin:10px 0 0 0;
        }

        #oper {
            float:left; 
            width:100px; 
            margin:10px;
        }
    </style>

    <script type="text/javascript">
        //编辑状态（编辑和添加）
        window.editState  = '';
        $(function(){
            //加载角色树
            $('#role').tree({
                url:'__APP__/Role/getRoleData',
                animate:true,
                lines:true,
                onClick : function(node) {
                    $('#permisson').tree({
                        url : '__APP__/Role/getPermissionData?roleId='+node.id,
                        animate:true,
                        lines:true,
                        checkbox:true
                    });
                },
                onDblClick: function(node){
                            $(this).tree('beginEdit',node.target);
                            window.editState = 'edit';
                },
                onAfterEdit : function(node) {
                    if (node.text == '') {
                        $.messager.alert('错误提示','请输入角色名称！','info');
                        if (window.editState == 'add') {
                            var node = $(this).tree('getChildren');
                            $(this).tree('remove', node[node.length-1].target);
                        }
                    }
                    else if (window.editState == 'edit') {
                        $.ajax({
                           url : '__APP__/Role/editRole',
                           type : 'post',
                           data : {'name':node.text,'id':node.id},
                           success : function() {
                                $('#role').tree('reload');
                           }
                        });
                    }
                    else if (window.editState == 'add'){
                        $.ajax({
                           url : '__APP__/Role/addRole',
                           type : 'post',
                           data : {'name':node.text},
                           success : function() {
                                $('#role').tree('reload');
                           }
                        });
                    }
                },
                onBeforeLoad : function() {
                    loading();
                },
                onLoadSuccess : function(e, data) {
                    removeLoading();
                }
            
            });

            $('#permisson').tree({
                url:'__APP__/Role/getPermissionData',
                animate:true,
                lines:true,
                checkbox:true
            });
        })
        
    </script>
    <script type="text/javascript">
            function addRole(){
                var t = $('#role');
                t.tree('append', {
                    parent: (null),
                    data: [{
                        text: '',
                        iconCls:'icon-notice'
                    }]
                });
                //t.tree('reload');
                var node = $('#role').tree('getChildren');
                t.tree('beginEdit',node[node.length-1].target);
                window.editState ='add';
            }
            function removeRole(){
                var node = $('#role').tree('getSelected');
                if (node) {
                    $.messager.confirm('安全提示','您确认要删除该角色吗？',function(data){
                        if(data){
                            $.ajax({
                               url : '__APP__/Role/removeRole',
                               type : 'post',
                               data : {id: node.id},
                               success : function() {
                                    $('#role').tree('reload');
                               }
                            });
                        }
                        
                    });
                    
               }
               else {
                $.messager.alert('错误提示','请选择一个角色');
               }
            }
            //Load   
            function add()
            {
                var node = $('#role').tree('getSelected');

                var nodes = $('#permisson').tree('getChecked');
                var s = [];
                for(var i=0; i<nodes.length; i++){
                    s.push(nodes[i].id);
                }
                
                $.ajax({
                    url : '__APP__/Role/addPermission',
                    type :'post',
                    data : {pmnId:s ,roleId:node.id },
                    success : function(data) {
                        $.messager.alert('消息提示','赋权成功！');
                    }
                })
            }
            /*-------------------加载框------------------------------------------*/
            function loading()
            {  
                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");  
                $("<div class=\"datagrid-mask-msg\"></div>").html("正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });  
            }  
              
            //hidden Load   
            function removeLoading() 
            {  
                $(".datagrid-mask").remove();  
                $(".datagrid-mask-msg").remove();  
            }  

    </script>
</head>
<body>
<div class="rolePanel">
    <div style="float:left;height:80px; width:80px;">
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" onclick="addRole()" plain ="true">添加角色</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeRole()" plain ="true">删除角色</a>
    </div>
    <div class="easyui-panel" title="角色">
        <ul id="role" style="min-height:200px;">

        </ul>
    </div>
</div>

<div id="oper">
    <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-undo"  onclick="add()">赋权限</a>
</div>
<div class="perPanel">
    <div class="easyui-panel" title="权限">
        <ul id="permisson" style="min-height:200px;">

        </ul>
    </div>
</div>

<div style="clear:both;"></div>
<div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="addRole()" data-options="iconCls:'icon-add'">添加角色</div>
        <div onclick="removeRole()" data-options="iconCls:'icon-remove'">删除角色</div>
</div>
</body>
</html>
